<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="groupbuyRule" :model="groupbuyForm" label-position="left" label-width="140px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="groupbuyForm.title" />
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker 
          v-model="groupbuyForm.beginTime"
          type="datetime"
          :shortcuts="shortcuts"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
        <el-date-picker 
          v-model="groupbuyForm.endTime"
          type="datetime"
          :shortcuts="shortcuts"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始日期"
          align="right"
        />
      </el-form-item>
      <el-form-item label="成团时间" prop="groupbuyTime">
        <el-input v-model="groupbuyForm.groupbuyTime" />
      </el-form-item>
      <el-form-item label="机器配团时间" prop="robotTime">
        成团前
        <el-input v-model="groupbuyForm.robotTime" />小时
        <div>无实际开团时，机器自动补齐最低团数</div>
      </el-form-item>
      <el-form-item label="成团人数" prop="groupbuyLimit">
        <el-input v-model="groupbuyForm.groupbuyLimit" />
      </el-form-item>
      <el-form-item label="适用客群" prop="title">
        <el-checkbox-group v-model="groupbuyForm.clienteteType">
          <el-checkbox label="全部" value="1"></el-checkbox>
          <el-checkbox label="指定用户" value="2"></el-checkbox>
          <el-checkbox label="用户组" value="3"></el-checkbox>
          <el-checkbox label="指定区域" value="4"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="产品" prop="products">
      </el-form-item>
      <el-form-item label="商品信息" prop="code">
        
    <el-table
      key="waybillShopping"
      :data="groupbuyForm.product"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      >
      <el-table-column label="产品" min-width="200">
        <template slot-scope="{row}">
          <el-input readonly="readonly" v-model="row.productName" />
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="100px">
        <template slot-scope="{row}">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.logo"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="价格" max-width="150px">
        <template slot-scope="{row}">
          <el-input v-model="row.originalPrice" />
        </template>
      </el-table-column>
      <el-table-column label="团购价格" max-width="150px">
        <template slot-scope="{row}">
          <el-input readonly="readonly" v-model="row.price" />
        </template>
      </el-table-column>
      <el-table-column label="数量" max-width="150px">
        <template slot-scope="{row}">
          <el-input v-model="row.quantity" />
        </template>
      </el-table-column>
      <el-table-column label="使用优惠卷" max-width="150px">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.useCoupon"
            active-value="1"
            inactive-value="2">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-button type="primary" @click="newProduct()">
        新产品
      </el-button>

      </el-form-item>
      <el-form-item label="团购推送标题" prop="pushTitle">
        <el-input v-model="groupbuyForm.pushTitle" />
      </el-form-item>
      <el-form-item label="团购推送语">
        <el-input v-model="groupbuyForm.pushText" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="介绍" />
      </el-form-item>
      <el-form-item label="团购开始推送标题" prop="beginTitle">
        <el-input v-model="groupbuyForm.beginTitle" />
      </el-form-item>
      <el-form-item label="团购开始推送语">
        <el-input v-model="groupbuyForm.beginText" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="介绍" />
      </el-form-item>
      <el-form-item label="分享链接标题" prop="shareTitle">
        <el-input v-model="groupbuyForm.shareTitle" />
      </el-form-item>
      <el-form-item label="分享链接内容">
        <el-input v-model="groupbuyForm.shareText" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="介绍" />
      </el-form-item>
      <el-form-item label="加入通知标题" prop="joinTitle">
        <el-input v-model="groupbuyForm.joinTitle" />
      </el-form-item>
      <el-form-item label="加入通知内容">
        <el-input v-model="groupbuyForm.joinText" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="介绍" />
      </el-form-item>
      <el-form-item label="组队完成标题" prop="finishTitle">
        <el-input v-model="groupbuyForm.finishTitle" />
      </el-form-item>
      <el-form-item label="组队完成内容">
        <el-input v-model="groupbuyForm.finishText" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="介绍" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="groupbuyForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
      <el-button v-if="groupbuyForm.status.value === 5" type="danger" @click="handleDelete(temp)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveGroupbuy, removeGroupbuyByID, getGroupbuyDetail } from '@/api/promotion/groupbuy'
import waves from '@/directive/waves' // waves directive
import { } from '@/utils'

export default {
  name: 'ComplexTable',
  components: { },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      groupbuyForm: {
        title: '',
        discount: '',
        restrict: 1,
        product:[
          {
            productName:"",
            logo:"",
            quantity:1,
            price:"",
            originalPrice:"",
            useCoupon:"1"
          }
        ],
        overlying: '',
        restrict_amount: '',
        status: {
          label: '',
          value: 1
        },
        style: {
          label: '',
          value: 1
        },
        begin_time: '',
        end_time: '',
        quantity: ''
      },
      groupbuyRule: []
    }
  },
  created() {
    let groupbuyID = this.$route.query && this.$route.query.groupbuyID
    if (groupbuyID !== undefined) {
      groupbuyID = parseInt(groupbuyID)
      if (!isNaN(groupbuyID)) {
        this.listLoading = true
        const formData = {
          'groupbuyID': groupbuyID
        }
        getGroupbuyDetail(formData).then(response => {
          if (response.status === 200) {
            this.groupbuyForm = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
    console.log(groupbuyID)
  },
  methods: {
    newProduct:function(){
      this.groupbuyForm.product.push({
            productName:"",
            logo:"",
            quantity:1,
            price:"",
            originalPrice:"",
            useCoupon:"1"
      })
    },
    handleCannel() {
      this.$router.push({ path: 'groupbuy' })
    },
    createData() {
      const _groupbuyForm = this.groupbuyForm
      if (_groupbuyForm.ID > 0) {
        _groupbuyForm.groupbuyID = _groupbuyForm.ID
      }
      try {
          _groupbuyForm.status = _groupbuyForm.status.value
      } catch (error) {
          _groupbuyForm.status = q
      }
      _groupbuyForm.product = JSON.stringify(_groupbuyForm.product)
      saveGroupbuy(_groupbuyForm).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'groupbuy' })
        } else {
          _groupbuyForm.product = JSON.parse(_groupbuyForm.product)
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      const _this = this
      const formData = {
        'groupbuyID': row.ID
      }
      console.log(index)
      removeGroupbuyByID(formData).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          _this.$router.push({ path: 'groupbuy' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
